<template>
    <div>
        <div>
            <div style="padding: 0px 24px;font-size: 16px; line-height: 30.88px;text-align: left;">
                <el-date-picker style="cursor: pointer;height:32px;" v-model="selectDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
                <span class="date">{{today}}</span>
                <span  id="isvaildReportLabel" style="font-size:1.125rem;margin-left:1.875rem">{{isvaildReportLabel}}</span>
            </div>
            <div class="day_model" v-show="day_model" style="display: flex;justify-content: space-between;">
                <div class="card adl-containerLeft" id="adl-container" style="text-align: left;width: 30rem;margin-left: 1.5rem;float: left;margin-top: 1.25rem; ">
                    <h2>日活动报告</h2>
                    <div class="stats-container">
                        <!--<div id="left" class="adl-panels" style="width: 608px;">-->
                        <div class="adl-panels" style="width: 100%;">
                            <table style="width: 100%;">
                                <tbody>
                                    <tr class="data-row bottom-border">
                                        <th class="capitalize" style="width:50%">夜间在床</th>
                                        <td style="width:50%;float: right;">
                                            <span class="highlight" id="Sleeptotal_Hours" style="font-size: 1.5rem">{{Sleeptotal_Hours}}</span>小时
                                            <span class="highlight" id="Sleeptotal_Minutes" style="font-size: 1.5rem">{{Sleeptotal_Minutes}}</span>分钟
                                        </td>
                                    </tr>
                                    <tr class="data-row bottom-border">
                                        <th class="capitalize" style="line-height: 2.5rem;">夜间睡眠</th>
                                        <td>
                                            <span class="highlight" id="Sleeptotal_yj_Hours" style="font-size: 1.5rem">{{Sleeptotal_yj_Hours}}</span>小时
                                            <span class="highlight" id="Sleeptotal_yj_Minutes" style="font-size: v">{{Sleeptotal_yj_Minutes}}</span>分钟
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <table style="margin-top:1.875rem;width: 100%;">
                                <tbody>
                                    <tr class="data-row bottom-border" style="width:100%" id="sinbedChart">
                                        <td style="width:100%">
                                            <div id="inbedChart" style="float: left; height: 12.5rem; width: 27rem; border-color: #F2F2F2"></div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <table style="width: 100%;">
                                <tbody>
                                    <tr class="data-row bottom-border">
                                        <th class="capitalize">上床时间</th>
                                        <td>
                                            <span class="highlight" style="font-size: 1.5rem" id="shangchuangtime">{{shangchuangtime}}</span>
                                        </td>
                                    </tr>
                                    <tr class="data-row bottom-border">
                                        <th class="capitalize">起床时间</th>
                                        <td>
                                            <span class="highlight" style="font-size: 1.5rem" id="qichuangtime">{{qichuangtime}}</span>
                                        </td>
                                    </tr>
                                    <tr class="data-row bottom-border" id="sqiyecishu">
                                        <th class="capitalize">起夜次数</th>
                                        <td>
                                            <span class="highlight" id="qiyecishu" style="font-size: 1.5rem">{{qiyecishu}}</span>次
                                        </td>
                                    </tr>
                                    <!-- 不是今天才显示 -->
                                    <!-- <tr class="data-row bottom-border" id="syejianlichuang">
                                        <th class="capitalize">夜间离床统计</th>
                                        <td>
                                            <span class="highlight" id="yejianlichuangdays" style="font-size: 24px"></span>次
                                        </td>
                                    </tr> -->
                                </tbody>
                            </table>

                        </div>

                    </div>
                </div>
                <div>
                    <div class="card" id="adl-container" style="margin: 1rem;margin-top: 1.25rem;margin-bottom:3.125rem;padding: .9rem 1.4rem;padding-bottom: 3.125rem;float: left;padding-bottom: 3.125rem;width: 55rem;box-shadow: 0 .875rem .875rem 0 rgb(0 0 0 / 20%), inset 0 .0313rem .0437rem 0 rgb(0 0 0 / 20%);border-radius: .875rem;">
                        <h2 style="padding-bottom: 15pt;text-align:left">睡眠深度分析</h2>
                        <div style="display:flex">
                            <div style="width: 25rem; float: left; position: relative;">
                                <div style="width:100%;height:56.25rem">
                                    <div style="width:100%;height:48%;float:left">
                                        <table>
                                            <tbody>
                                                <tr style="line-height: 16px;" >
                                                    <th class="capitalize" style="text-align: left;font-size:14pt;">睡眠评分</th>
                                                    <td style="float:left;position:absolute;right:0;top:.25rem;font-size:16px">
                                                        <span class="highlight" style="font-size:32px" id="sbsmpf">{{sbsmpf}}</span><span>分</span>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>
                                                        <div id="smpfChart" style="float: left;height:18.75rem;width:24rem;border-color:#F2F2F2"></div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div style="display: flex;width:70%">
                                                            <div style="color: #714890; text-align: center; font-size: 10.5pt; flex: 1">深睡</div>
                                                            <div style="color: #5788C6; text-align: center; font-size: 10.5pt; flex: 1">浅睡</div>
                                                            <div style="color: #8A8A8A; text-align: center; font-size: 10.5pt; flex: 1">清醒</div>
                                                            <div style="color: #E2B363; text-align: center; font-size: 10.5pt; flex: 1">离床</div>
                                                            <div style="color: #77D2EF; text-align: center; font-size: 10.5pt; flex: 1">REM</div>
                                                        </div>
                                                    </td>

                                                </tr>
                                            </tbody>

                                        </table>

                                    </div>
                                    <div style="width:100%;height:33%;float:left">
                                        <table>
                                            <tbody>
                                                <tr class="data-row " style="font-size:14pt;text-align:left">
                                                    <th>睡眠深度</th>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div id="smsdChart" style="float: left; height: 10.625rem; width: 24rem; border-color: #F2F2F2;top:1.875rem;"></div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div style="width:100%;height:18%;float:left">
                                        <table style="width:100%;">
                                            <tbody>
                                                <tr style="line-height: 14pt;display: flex;justify-content: space-between;align-items: center;height: 14pt;" >
                                                    <th style="font-size:14pt;text-align: left;">入睡用时</th>
                                                    <td style="font-size:16px">
                                                        <span class="highlight" style="font-size:32px" id="sbsmpf">{{fallAsleeps}}</span><span>分</span>
                                                    </td>
                                                </tr>
                                                <tr style="line-height: 14pt;margin-top:1.875rem;display: flex;justify-content: space-between;align-items: center;height: 14pt;" >
                                                    <th style="font-size:14pt;text-align: left;">睡眠效率</th>
                                                    <td style="font-size:16px">
                                                        <span class="highlight" style="font-size:32px" id="sbsmpf">{{sleep_efficiency}}</span><span>%</span>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div style="width:100%;float:left;display:none;">
                                        <table>
                                            <tbody>
                                                <tr class="data-row " style=" text-align:left;font-size: 16px">
                                                    <th id="xqj">{{getWeekDay()}}</th>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div id="smlaChartreport" style="float: left; height: 10.625rem; width: 36rem; border-color: #F2F2F2"></div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                            </div>
                            <div style=" width: 30rem; margin-left: 1.4rem; float: left;" id="display1">
                                <div style="width:100%;height:37.5rem">
                                    <div style="width:100%;height:48%;float:left">
                                        <table style="width:100%;height:100%">
                                            <tbody>
                                                <tr class="data-row echarttitle">
                                                    <th style="font-size:14pt;text-align: left;">心率</th>
                                                    <td style="font-size:16px">
                                                        <span class="highlight" style="font-size:32px" id="sbsmpf">{{heartRate_Minutes}}</span>次/分钟
                                                    </td>
                                                </tr>
                                                <tr style="width:100%">
                                                    <td>
                                                        <div id="sbxlChart" style="float: left; height: 16.25rem; width: 30rem; border-color: #F2F2F2"></div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div style="width:100%;height:48%;float:left;margin-top:15%">

                                        <table style="width:100%;height:100%">
                                            <tbody>
                                                <tr class="data-row echarttitle" style="line-height: 16px;display: flex;justify-content: space-between;align-items: center;height: 16px;">
                                                    <th style="font-size:14pt;text-align: left;">呼吸率</th>
                                                    <td style="font-size:16px">
                                                        <span class="highlight" style="font-size:32px" id="sbsmpf">{{hxl_Minutes}}</span>次/分钟
                                                    </td>
                                                </tr>
                                                <tr style="width:100%">
                                                    <td>
                                                        <div id="sbhxlChart" style="float: left; height: 16.25rem; width: 30rem; border-color: #F2F2F2"></div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div style="width:100%;float:left;margin-top:5%">
                                        <table style="width:100%;height:100%;text-align:left;">
                                            <tbody>
                                                <tr class="data-row" style="font-size:14pt;float:left;width:70%;margin-bottom:32px;">
                                                    <th>关于睡眠</th>
                                                </tr>
                                                <tr>
                                                    <td style=" font-size: 14.4px; padding-left: 9.6px;">
                                                        <strong>睡眠阶段</strong>
                                                        <div style="width: 100%; white-space: normal;margin-bottom:14.4px; ">
                                                            每晚睡眠时，您的身体会经历由几个睡眠阶段组成的睡眠周期。在不同的睡眠周期中，最常见的是从浅睡到深睡，再回到浅睡，然后进入快速眼动睡眠。浅睡阶段有助于促进精神和体力的恢复。深度睡眠很重要，它能促进体力的恢复和记忆力的提高，也能增强您的免疫系统
                                                        </div>   
                                                        <strong>入睡延时</strong>
                                                        <div style="width: 100%; white-space: normal;margin-bottom:14.4px; ">
                                                            也被称为睡眠开始潜伏期 (SOL) 。是您从清醒到入睡所需的时间，理想情况下需要15-20分钟才能入睡，理想的睡眠潜伏期是睡眠良好的基础。
                                                        </div>
                                                        <strong>睡眠效率</strong>
                                                        <div style="width: 100%; white-space: normal;margin-bottom:14.4px; ">
                                                            睡眠效率指您实际睡眠时间与您在床上的总时间的比例。睡眠效率越高，说明您的睡眠质量越好。
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
  import { mapState } from "vuex";
  import { GetDailyReport,GetDailyReportAgo,GetSleepDeepInfo } from "../../api/index";
  export default {
    name: "dayReport",
    components: {
    },
    computed: mapState({
      currentUserId: (state) => state.currentUserId, //当前的用户id
      userInfoDetails: (state) => state.userInfoDetails,//用户信息
    }),
    data() {
      return {
        isvaildReportLabel:'',
        Sleeptotal_Hours:'',
        Sleeptotal_Minutes:'',
        Sleeptotal_yj_Hours:'',
        Sleeptotal_yj_Minutes:'',
        day_model:'',
        shangchuangtime:'',
        qichuangtime:'',
        qiyecishu:'',   
        sbsmpf:'',
        fallAsleeps:'',
        sleep_efficiency:'',
        heartRate_Minutes:'',
        hxl_Minutes:'',
        today:'',
        selectDate: ''
      };
    },
    created(){
        // var box=document.getElementById("tabsContainer").offsetHeight;
        // //将子元素的高度赋予父元素
        // document.getElementById("app").style.height=box + 2;
      this.GetDailyReport()
      this.today = this.getWeekDay()+'，'+new Date().Format('yyyy年MM月dd日')
      this.selectDate =  new Date().Format('yyyy-MM-dd')
    },
    watch:{
       selectDate(val){
           this.today = this.getWeekDay(val)+'，'+new Date(val).Format('yyyy年MM月dd日')
           if(val == new Date().Format('yyyy-MM-dd')){ //今天
               this.GetDailyReport()
           }else{
               this.GetDailyReportAgo() // 历史
           }
       }
    },
    methods: {
        // 获取星期
        getWeekDay(param1) {
            var rule={
                1:'星期一',
                2:'星期二',
                3:'星期三',
                4:'星期四',
                5:'星期五',
                6:'星期六',
                0:'星期日'
            }
            return rule[new Date(param1).getDay()]
        },
        GetDailyReport(){
            var This = this
            var query = this.currentUserId
            GetDailyReport(query).then((res) => {
            var AllTime = [], AllTime1 = [], AllUserName = [], AllTime2 = [], datamarkLine1 = [], datamarkLine = [];
            var dataSleep = [], dataSleeps = [],  dataOther = [], dataSleep1 = [];
            var time1 = This.addDate(new Date(), 0);
            var time = new Date(time1 + ' 00:00');

            var addTime = 60 * 1000;

            for (var i = 0; i < 1440; i++) {
                if (i === 0) {
                    AllTime.push('0AM');
                    time = new Date(+time + addTime);
                    dataOther.push([query, '0AM', '09:59 ']);
                } else if (i === 240) {
                    AllTime.push('4');
                    time = new Date(+time + addTime);
                }
                else if (i === 240 * 2) {
                    AllTime.push('8');
                    time = new Date(+time + addTime);
                }
                else if (i === 240 * 3) {
                    AllTime.push('12AM');
                    time = new Date(+time + addTime);
                }
                else if (i === 240 * 4) {
                    AllTime.push('16');
                    time = new Date(+time + addTime);
                }
                else if (i === 240 * 5) {
                    AllTime.push('20');
                    time = new Date(+time + addTime);
                    dataOther.push(['20', query]);
                }
                else {
                    AllTime.push(time.Format("hh:mm"));
                    time = new Date(+time + addTime);
                }
            }
            for (var j = 0; j <= 720 + 240; j++) {
                if (j === 0) {
                    AllTime.push('0AM ');
                    time = new Date(+time + addTime);
                }
                else if (j === 240) {
                    AllTime.push('4 ');
                    time = new Date(+time + addTime);
                }
                else if (j === 240 * 2) {
                    AllTime.push('8 ');
                    time = new Date(+time + addTime);
                }
                else if (j === 600) {
                    AllTime.push('10AM ');
                    dataOther.push(['10AM ', query]);
                }
                if (j === 720) {
                    AllTime.push('12AM ');
                    dataOther.push(['12AM ', query]);
                }
                else {
                    if (j < 950) {
                        AllTime.push(time.Format("hh:mm") + " ");
                        time = new Date(+time + addTime);
                    } else {
                        AllTime.push('16PM');
                        time = new Date(+time + addTime);
                    }
                }
            }
                var data = res.report
                data.statistics_SleepDeep = data.deep
                if (data.isValid == 0) {
                    if (data.excludedReason != null) {
                        This.isvaildReportLabel = '本日无报告:' + data.excludedReason
                    } else {
                        This.isvaildReportLabel = ''
                    }
                    This.day_model = false
                } else {
                    This.day_model = true
                    This.isvaildReportLabel = ''
                }
                This.Sleeptotal_Hours = data.statistics_Sleep.total_Hours ? data.statistics_Sleep.total_Hours : 0
                This.Sleeptotal_Minutes = data.statistics_Sleep.total_Minutes ? data.statistics_Sleep.total_Minutes : 0
                This.Sleeptotal_yj_Hours = data.deep.lastNight.sleep.total_hours
                This.Sleeptotal_yj_Minutes = data.deep.lastNight.sleep.total_minutes
                This.shangchuangtime = new Date(data.timePoint_GoBed).Format('hh:mm') + (new Date(data.timePoint_GoBed).getHours() <= 12 ? 'am' : 'pm')
                This.qichuangtime = new Date(data.timePoint_GetUp).Format('hh:mm') + (new Date(data.timePoint_GetUp).getHours() <= 12 ? 'am' : 'pm')
                This.qiyecishu = data.timePoints_NightUp ? data.timePoints_NightUp.length : 0
                //柱状图
                var fallAsleep, leaveBed, sleep, stayBed
                var fallAsleeps = [], leaveBeds = [], sleeps = [], stayBeds = [];
                var zztdata = []
                if (data.statistics_SleepDeep != null) {
                    fallAsleeps = parseInt(data.statistics_SleepDeep.lastNight.fallAsleep.total_hours) * 60 + data.statistics_SleepDeep.lastNight.fallAsleep.total_minutes;
                    leaveBeds = parseInt(data.statistics_SleepDeep.lastNight.leaveBed.total_hours) * 60 + data.statistics_SleepDeep.lastNight.leaveBed.total_minutes;
                    sleeps = parseInt(data.statistics_SleepDeep.lastNight.sleep.total_hours) * 60 + data.statistics_SleepDeep.lastNight.sleep.total_minutes;
                    stayBeds = parseInt(data.statistics_SleepDeep.lastNight.stayBed.total_hours) * 60 + data.statistics_SleepDeep.lastNight.stayBed.total_minutes;
                    stayBed = data.statistics_SleepDeep.lastNight.stayBed.total_hours + "h"
                        + data.statistics_SleepDeep.lastNight.stayBed.total_minutes + "m"
                    sleep = data.statistics_SleepDeep.lastNight.sleep.total_hours + "h"
                        + data.statistics_SleepDeep.lastNight.sleep.total_minutes + "m"
                    leaveBed = data.statistics_SleepDeep.lastNight.leaveBed.total_hours + "h"
                        + data.statistics_SleepDeep.lastNight.leaveBed.total_minutes + "m"
                    fallAsleep = data.statistics_SleepDeep.lastNight.fallAsleep.total_hours + "h"
                        + data.statistics_SleepDeep.lastNight.fallAsleep.total_minutes + "m"
                    zztdata.push({ name: '入睡时间', value: fallAsleeps, value1: fallAsleep })
                    zztdata.push({ name: '离床时间', value: leaveBeds, value1: leaveBed })
                    zztdata.push({ name: '睡觉时间', value: sleeps, value1: sleep })
                    zztdata.push({ name: '卧床时间', value: stayBeds, value1: stayBed })
                }
                var smsdy = []
                var deepPercent, lightPercent, leavePercent, aweekPercent, remPercent
                var deepPercents, lightPercents, leavePercents, aweekPercents, remPercents
                //算占比
                let totalminite1 = (data.deep.deep.deep_duration.total_hours)*60+data.deep.deep.deep_duration.total_minutes
                let totalminite2 = (data.deep.deep.light_duration.total_hours)*60+data.deep.deep.light_duration.total_minutes
                let totalminite3 = (data.deep.deep.aweek_duration.total_hours)*60+data.deep.deep.aweek_duration.total_minutes
                let totalminite4 = (data.deep.deep.leave_duration.total_hours)*60+data.deep.deep.leave_duration.total_minutes
                let totalminite5 =  (data.deep.deep.rem_duration.total_hours)*60+data.deep.deep.rem_duration.total_minutes
                let totalminute = totalminite1+totalminite2+totalminite3+totalminite4+totalminite5
                deepPercent = (totalminute==0) ? 0 : Math.round((totalminite1 / totalminute).toFixed(2)*100)        
                lightPercent= (totalminute==0) ? 0 : Math.round((totalminite2 / totalminute).toFixed(2)*100)       
                leavePercent=(totalminute==0) ? 0 : Math.round((totalminite4 / totalminute).toFixed(2)*100)  
                remPercent= (totalminute==0) ? 0 : Math.round((totalminite5 / totalminute).toFixed(2)*100) 
                aweekPercent= (totalminute==0) ? 0 : (100- deepPercent -lightPercent-leavePercent-remPercent)
                var zztdata1 = []
                smsdy.push(deepPercent + '%')
                smsdy.push(lightPercent + '%')
                smsdy.push(aweekPercent + '%')
                smsdy.push(leavePercent + '%')
                smsdy.push(remPercent + '%')
                if (data.deep != null) {
                    aweekPercents = data.deep.deep.aweek_duration.total_hours
                        + 'h' + data.deep.deep.aweek_duration.total_minutes + 'm'
                    leavePercents = data.deep.deep.leave_duration.total_hours
                        + 'h' + data.deep.deep.leave_duration.total_minutes + 'm'
                    lightPercents = data.deep.deep.light_duration.total_hours
                        + 'h' + data.deep.deep.light_duration.total_minutes + 'm'
                    deepPercents = data.deep.deep.deep_duration.total_hours
                        + 'h' + data.deep.deep.deep_duration.total_minutes + 'm'
                    remPercents = data.deep.deep.rem_duration.total_hours
                        + 'h' + data.deep.deep.rem_duration.total_minutes + 'm'
                        zztdata1.push({ name: smsdy[0], value: deepPercent, value1: deepPercents,value2:'深睡' })
                    zztdata1.push({ name: smsdy[1], value: lightPercent, value1: lightPercents,value2:'浅睡' })
                    zztdata1.push({ name: smsdy[2], value: aweekPercent, value1: aweekPercents,value2:'清醒' })
                    zztdata1.push({ name: smsdy[3], value: leavePercent, value1: leavePercents,value2:'离床' })
                    zztdata1.push({ name: smsdy[4], value: remPercent, value1: remPercents,value2:'rem' })
                }
                var optionzzt1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLabel: {
                            show: false,//不显示坐标轴上的文字
                        },
                        axisLine: {
                            show: false,//不显示坐标轴线
                        }, axisTick: {
                            show: false//不显示坐标轴刻度线
                        }, splitLine: {
                            show: false//不显示网格线
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: smsdy,
                        axisTick: {
                            show: false//不显示坐标轴刻度线
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            data: zztdata1,

                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        //var colorList = ["#8A8A8A", "#5788C6", "#714890","#77D2EF"];
                                        //var colorList = ["#77D2EF", '#E2B363', "#714890", "#5788C6", "#8A8A8A"];
                                        var colorList = ["#714890", '#5788C6','#8A8A8A', '#E2B363','#77D2EF',];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },
                            label: {
                                show: true,
                                position: [10, 7],
                                textStyle: {
                                    color: '#333'
                                },
                                formatter: function (params) {
                                    //params指的是 data 里面字典的参数，现在字典里用了name（装了公司名）、value（每个公司的销售）两个参数，
                                    //return params.name + "：" + params.value1;
                                    return params.data.value1
                                },
                            }
                        }

                    ]
                };
                let smsdChart = This.$echarts.init(document.getElementById('smsdChart'));
                smsdChart.clear();
                smsdChart.resize()
                smsdChart.setOption(optionzzt1);
                window.addEventListener("resize", function () {
                    smsdChart.resize();
                });
                if (data.statistics_Sleep != null) {
                    if (data.statistics_Sleep.activeArray != null) {
                        for (var k = 0; k < data.statistics_Sleep.activeArray.length; k++) {
                            var endtime1 = new Date(data.statistics_Sleep.activeArray[k].timePoint);
                            var endtimemin1 = endtime1.getMinutes();
                            endtime1.setMinutes(endtimemin1 + data.statistics_Sleep.activeArray[k].duration);
                            //  var endtime1 = new Date(data.timePoint_GetUp).Format('hh:mm ');
                            var days = This.datedifference(new Date(endtime1).Format('yyyy-MM-dd'), new Date(data.statistics_Sleep.activeArray[k].timePoint).Format('yyyy-MM-dd'));
                            if (k === data.statistics_Sleep.activeArray.length - 1) {
                                if (new Date(data.statistics_Sleep.activeArray[k].timePoint).getHours() >= 0 && new Date(data.statistics_Sleep.activeArray[k].timePoint).getHours() < 12) {
                                    var   sleepstart = new Date(data.statistics_Sleep.activeArray[k].timePoint).Format('hh:mm ');
                                    // sleepend = new Date(endtime1).Format('hh:mm ');
                                } else {
                                    sleepstart = new Date(data.statistics_Sleep.activeArray[k].timePoint).Format('hh:mm');
                                    // sleepend = new Date(endtime1).Format('hh:mm');
                                    if (days == 0) {
                                        // sleepend = new Date(endtime1).Format('hh:mm');
                                    }
                                    else {
                                        // sleepend = new Date(endtime1).Format('hh:mm ');
                                    }
                                }
                                var start, end
                                start = new Date(data.statistics_Sleep.activeArray[k].timePoint)
                                end = new Date(start.getTime() + (1000 * 60 * data.statistics_Sleep.activeArray[k].duration))
                                dataSleep.push([
                                    data.userID,
                                    start.Format('hh:mm'),
                                    end.Format('hh:mm'),
                                    data.statistics_Sleep.activeArray[k].duration
                                ]);
                                dataSleeps.push([
                                    data.userID,
                                    new Date(data.timePoint_GoBed).Format('hh:mm'),
                                    new Date(data.timePoint_GetUp).Format('hh:mm '),
                                    data.statistics_Sleep.activeArray[k].duration
                                ]);
                                datamarkLine.push({
                                    xAxis: new Date(data.timePoint_GetUp).Format('hh:mm '), name: 'W', lineStyle: { color: '#6495ED', type: 'solid', width: 5 }, label:
                                    {
                                        formatter: 'W'
                                    }
                                });
                                datamarkLine.push({
                                    xAxis: sleepstart, name: 'S', lineStyle: { color: '#ED7762', type: 'solid', width: 5 }, label:
                                    {
                                        formatter: 'S'
                                    }
                                });
                            } else {
                                start = new Date(data.statistics_Sleep.activeArray[k].timePoint)
                                end = new Date(start.getTime() + (1000 * 60 * data.statistics_Sleep.activeArray[k].duration))
                                dataSleep.push([
                                    data.userID,
                                    start.Format('hh:mm'),
                                    end.Format('hh:mm'),
                                    data.statistics_Sleep.activeArray[k].duration
                                ]);
                                dataSleeps.push([
                                    data.userID,
                                    new Date(data.timePoint_GoBed).Format('hh:mm'),
                                    new Date(data.timePoint_GetUp).Format('hh:mm '),
                                    data.statistics_Sleep.activeArray[k].duration
                                ]);
                            }
                        }
                    }
                }
                if (dataSleep.length > 1) {
                    dataSleep1.push(dataSleep[dataSleep.length - 1])
                } else {
                    dataSleep1.push(dataSleep[0])
                }
                AllUserName.push(query);
                for (let i = 1200 - 240; i < AllTime.length; i++) {
                    AllTime1.push(AllTime[i])
                    if (AllTime[i] == '11:59 ') {
                        AllTime2.push('12AM')
                        AllTime2.push('11:59')
                    }
                    else if (AllTime[i] == '20') {
                        //   AllTime2.push('0AM')
                        AllTime2.push('20:00')
                    }
                    else if (AllTime[i] == '0AM ') {
                        //   AllTime2.push('0AM')
                        AllTime2.push('00:00')
                    }
                    else if (AllTime[i] == '4AM ') {
                        AllTime2.push('04:00')
                        // AllTime2.push('4AM')

                    }
                    else if (AllTime[i] == '8AM ') {
                        //   AllTime2.push('8AM')
                        AllTime2.push('08:00')
                    }
                    else {
                        AllTime2.push(AllTime[i].replace(/\s*/g, ''))
                    }

                }
                //起夜
                if (data.timePoints_NightUp != null) {
                    if (data.statistics_Sleep.activeArray != null) {
                        
                        for (var n = 0; n < data.timePoints_NightUp.length; n++) {
                            var days1 = This.datedifference(new Date(data.timePoints_NightUp[n]).Format('yyyy-MM-dd'), new Date(data.statistics_Sleep.activeArray[data.statistics_Sleep.activeArray.length - 1].timePoint).Format('yyyy-MM-dd'));
                            if (days1 == 0) {
                                var   dataNightUp = new Date(data.timePoints_NightUp[n]).Format('hh:mm');
                            } else {
                                dataNightUp = new Date(data.timePoints_NightUp[n]).Format('hh:mm ');
                            }
                            datamarkLine.push({
                                xAxis: dataNightUp, name: 'N', lineStyle: { color: '#FFD700', type: 'solid', width: 3 }, label:
                                {
                                    formatter: 'N'
                                }
                            });
                            datamarkLine1.push({
                                xAxis: new Date(data.timePoints_NightUp[n]).Format('hh:mm'), name: 'N', lineStyle: { color: '#FFD700', type: 'solid', width: 3 }, label:
                                {
                                    formatter: 'N'
                                }
                            });
                            // dataNightUpCount++;
                        }
                    }
                }
                var option33 = {
                    tooltip: {
                        formatter: function (datas) {

                            var res = '';
                            if (datas.name == 'S') {

                                res += '上床时间:' + '</br>';
                                res += datas.value;
                            } else if (datas.name == 'W') {
                                res += '起床时间:' + '</br>';
                                res += datas.value;
                            }
                            else if (datas.name == 'N') {
                                res += '起夜时间:' + '</br>';
                                res += datas.value;
                            }
                            else if (datas.seriesName == '外出') {
                                res += '外出时间:' + datas.value[1] + '</br>';
                                res += '返回时间:' + datas.value[2] + '</br>';
                                res += '时长:' + datas.value[3] + '分钟</br>';
                            }
                            else if (datas.seriesName == '休息') {
                                //res += '休息时间:' + datas.value[1] + '</br>';
                                ////res += '返回时间:' + datas.value[2] + '</br>';
                                //res += '时长:' + datas.value[3] + '分钟</br>';
                            }
                            return res;
                        }
                    },
                    grid: {
                        top: '10%',
                        left: '20',
                        right: '20',
                        bottom: '10',
                        containLabel: true
                    },

                    //legend: {
                    //    //data: ['休息', '外出', '外出返回', '午休', '看电视', '聊天', '睡觉', '起夜', '其他']
                    //    //data: ['休息', '外出']
                    //},

                    xAxis: {
                        //name: '时间',
                        type: 'category',
                        data: AllTime2,
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisLabel: {
                            interval: 239,
                            rotate: 0,
                            showMaxLabel: true
                        }



                    },
                    yAxis: {
                        //name: '用户ID',
                        type: 'category',
                        data: AllUserName,
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisLine: { //y轴
                            show: false

                        },
                        axisLabel: {
                            show: false,//不显示坐标轴上的文字
                        },
                        scale: true
                    },

                    series: [
                        {
                            name: '休息',
                            //data: dataSleep1,
                            data: dataSleep,
                            type: 'custom',
                            renderItem: This.renderItem,
                            itemStyle: {
                                normal: {
                                    opacity: 0.8
                                }
                            },
                            tooltip: {
                                formatter: function (datas) {
                                    var res = '';
                                    res += '上床时间:' + datas.value[1] + '</br>';
                                    res += '下床时间:' + datas.value[2] + '</br>';
                                    res += '睡眠时长:' + data.deep.lastNight.sleep.total_hours + '小时' + data.deep.lastNight.sleep.total_minutes + '分钟</br>';
                                    return res;
                                }
                            },
                            encode: {
                                x: [1, 2],
                                y: 0
                            },
                            //type: 'line',
                            color: '#764B97',
                            //markLine: {


                            //    symbol: 'none', //标示线，虚线去掉箭头
                            //    data: datamarkLine

                            //}
                            markLine: {
                                symbol: 'none', //标示线，虚线去掉箭头
                                data: datamarkLine1

                            }
                        }
                    ]
                };
                let inbedChart = This.$echarts.init(document.getElementById('inbedChart'));
                inbedChart.clear();
                inbedChart.resize()
                inbedChart.setOption(option33);
                window.addEventListener("resize", function () {
                    inbedChart.resize();
                });
                //睡眠评分2222
                var shenshui = [], qianshui = [], qingxing = [], lichuang = [], rem = []
                if (data.statistics_SleepDeep != null) {
                    for (let i = 0; i < data.statistics_SleepDeep.deep.deep_duration.times.length; i++) {
                        // let endtime1 = new Date(data.statistics_SleepDeep.deep.deep_duration.activeArray[i].timePoint);
                        // let endtimemin1 = endtime1.getMinutes();
                        // endtime1.setMinutes(endtimemin1 + data.statistics_SleepDeep.deep.deep_duration.activeArray[i].duration);
                        shenshui.push([
                            data.userID,
                            // new Date(data.statistics_SleepDeep.deep.deep_duration.activeArray[i].timePoint).Format('hh:mm'),
                            // new Date(endtime1).Format('hh:mm'),
                            data.statistics_SleepDeep.deep.deep_duration.times[i].time_begin.substring(0,5),
                            data.statistics_SleepDeep.deep.deep_duration.times[i].time_end.substring(0,5),
                            data.statistics_SleepDeep.deep.deep_duration.times[i].duration
                        ]);
                    }
                    for (let i = 0; i < data.statistics_SleepDeep.deep.light_duration.times.length; i++) {
                        // let endtime1 = new Date(data.statistics_SleepDeep.deep.light_duration.activeArray[i].timePoint);
                        // let endtimemin1 = endtime1.getMinutes();
                        // endtime1.setMinutes(endtimemin1 + data.statistics_SleepDeep.deep.light_duration.activeArray[i].duration);
                        qianshui.push([
                            data.userID,
                            // new Date(data.statistics_SleepDeep.deep.light_duration.activeArray[i].timePoint).Format('hh:mm'),
                            // new Date(endtime1).Format('hh:mm'),
                            data.statistics_SleepDeep.deep.light_duration.times[i].time_begin.substring(0,5),
                            data.statistics_SleepDeep.deep.light_duration.times[i].time_end.substring(0,5),
                            data.statistics_SleepDeep.deep.light_duration.times[i].duration
                        ]);
                    }
                    for (let i = 0; i < data.statistics_SleepDeep.deep.aweek_duration.times.length; i++) {
                        // let endtime1 = new Date(data.statistics_SleepDeep.deep.aweek_duration.activeArray[i].timePoint);
                        // let endtimemin1 = endtime1.getMinutes();
                        // endtime1.setMinutes(endtimemin1 + data.statistics_SleepDeep.deep.aweek_duration.activeArray[i].duration);
                        qingxing.push([
                            data.userID,
                            // new Date(data.statistics_SleepDeep.deep.aweek_duration.activeArray[i].timePoint).Format('hh:mm'),
                            // new Date(endtime1).Format('hh:mm'),
                            data.statistics_SleepDeep.deep.aweek_duration.times[i].time_begin.substring(0,5),
                            data.statistics_SleepDeep.deep.aweek_duration.times[i].time_end.substring(0,5),
                            data.statistics_SleepDeep.deep.aweek_duration.times[i].duration
                        ]);
                    }

                    for (let i = 0; i < data.statistics_SleepDeep.deep.leave_duration.times.length; i++) {
                        // let endtime1 = new Date(data.statistics_SleepDeep.deep.leave_duration.activeArray[i].timePoint);
                        // let endtimemin1 = endtime1.getMinutes();
                        // endtime1.setMinutes(endtimemin1 + data.statistics_SleepDeep.deep.leave_duration.activeArray[i].duration);
                        lichuang.push([
                            data.userID,
                            // new Date(data.statistics_SleepDeep.deep.leave_duration.activeArray[i].timePoint).Format('hh:mm'),
                            // new Date(endtime1).Format('hh:mm'),
                            data.statistics_SleepDeep.deep.leave_duration.times[i].time_begin.substring(0,5),
                            data.statistics_SleepDeep.deep.leave_duration.times[i].time_end.substring(0,5),
                            data.statistics_SleepDeep.deep.leave_duration.times[i].duration
                        ]);
                    }

                    for (let i = 0; i < data.statistics_SleepDeep.deep.rem_duration.times.length; i++) {
                        // let endtime1 = new Date(data.statistics_SleepDeep.deep.rem_duration.activeArray[i].timePoint);
                        // let endtimemin1 = endtime1.getMinutes();
                        // endtime1.setMinutes(endtimemin1 + data.statistics_SleepDeep.deep.rem_duration.activeArray[i].duration);
                        rem.push([
                            data.userID,
                            // new Date(data.statistics_SleepDeep.deep.rem_duration.activeArray[i].timePoint).Format('hh:mm'),
                            // new Date(endtime1).Format('hh:mm'),
                            data.statistics_SleepDeep.deep.rem_duration.times[i].time_begin.substring(0,5),
                            data.statistics_SleepDeep.deep.rem_duration.times[i].time_end.substring(0,5),
                            data.statistics_SleepDeep.deep.rem_duration.times[i].duration
                        ]);
                    }
                }
                var optionpc = {
                    tooltip: {
                        formatter: function (datas) {
                            var res = '';
                            if (datas.name == 'S') {
                                res += '上床时间:' + '</br>';
                                res += datas.value;
                            } else if (datas.name == 'W') {
                                res += '起床时间:' + '</br>';
                                res += datas.value;
                            }
                            else if (datas.name == 'N') {
                                res += '起夜时间:' + '</br>';
                                res += datas.value;
                            }
                            else if (datas.seriesName == '外出') {
                                res += '外出时间:' + datas.value[1] + '</br>';
                                res += '返回时间:' + datas.value[2] + '</br>';
                                res += '时长:' + datas.value[3] + '分钟</br>';
                            }
                            else if (datas.seriesName == '休息') {
                                //res += '休息时间:' + datas.value[1] + '</br>';
                                ////res += '返回时间:' + datas.value[2] + '</br>';
                                //res += '时长:' + datas.value[3] + '分钟</br>';
                            }
                            return res;
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '20',
                        right: '20',
                        bottom: '40',
                        containLabel: true
                    },
                    xAxis: {
                        //name: '时间',
                        type: 'category',
                        data: AllTime2,
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisLabel: {
                            interval: 239,
                            rotate: 0,
                            showMaxLabel: true
                        }



                    },
                    yAxis: {
                        //name: '用户ID',
                        type: 'category',
                        data: AllUserName,
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisLine: { //y轴
                            show: false

                        },
                        axisLabel: {
                            show: false,//不显示坐标轴上的文字
                        },
                        scale: true
                    },

                    series: [
                        {
                            name: '深睡',
                            data: shenshui,
                            type: 'custom',
                            renderItem: function(params,api){
                                return This.renderItemsm(params, api)
                            },
                            // renderItem:This.renderItemsm(),
                            itemStyle: {
                                normal: {
                                    opacity: 0.8
                                }
                            },
                            tooltip: {
                                formatter: function (datas) {

                                    var res = '';
                                    res += '深睡时间:' + datas.value[1] + '</br>';
                                    res += '深睡时间:' + datas.value[2] + '</br>';

                                    res += '深睡时长:' + parseInt(datas.value[3] / 60) + '小时' + datas.value[3] % 60 + '分钟</br>';

                                    return res;
                                }
                            },
                            encode: {
                                x: [1, 2],
                                y: 0
                            },
                            //type: 'line',
                            color: '#714890',

                        }
                        , {
                            name: '浅睡',
                            data: qianshui,
                            type: 'custom',
                            // renderItem: This.renderItemsm1(),
                            renderItem: function(params,api){
                                return This.renderItemsm1(params, api)
                            },
                            itemStyle: {
                                normal: {
                                    opacity: 0.8
                                }
                            },
                            encode: {
                                x: [1, 2],
                                y: 0
                            },
                            tooltip: {
                                formatter: function (datas) {

                                    var res = '';
                                    res += '浅睡时间:' + datas.value[1] + '</br>';
                                    res += '浅睡时间:' + datas.value[2] + '</br>';
                                    res += '浅睡时长:' + parseInt(datas.value[3] / 60) + '小时' + datas.value[3] % 60 + '分钟</br>';
                                    return res;
                                }
                            },
                            'color': '#5788C6',

                        }
                        , {
                            name: '清醒',
                            data: qingxing,
                            type: 'custom',
                            // renderItem: This.renderItemsm2(),
                            renderItem: function(params,api){
                                return This.renderItemsm2(params, api)
                            },
                            itemStyle: {
                                normal: {
                                    opacity: 0.8
                                }
                            },
                            encode: {
                                x: [1, 2],
                                y: 0
                            }
                            ,
                            tooltip: {
                                formatter: function (datas) {

                                    var res = '';
                                    res += '清醒时间:' + datas.value[1] + '</br>';
                                    res += '清醒时间:' + datas.value[2] + '</br>';
                                    res += '清醒时长:' + parseInt(datas.value[3] / 60) + '小时' + datas.value[3] % 60 + '分钟</br>';
                                    return res;
                                }
                            },
                            color: '#8A8A8A',

                        }, {
                            name: '离床',
                            data: lichuang,
                            type: 'custom',
                            // renderItem: This.renderItemsm2(),
                                renderItem: function(params,api){
                                return This.renderItemsm2(params, api)
                            },
                            itemStyle: {
                                normal: {
                                    opacity: 0.8
                                }
                            },
                            encode: {
                                x: [1, 2],
                                y: 0
                            },
                            tooltip: {
                                formatter: function (datas) {

                                    var res = '';
                                    res += '离床时间:' + datas.value[1] + '</br>';
                                    res += '离床时间:' + datas.value[2] + '</br>';
                                    res += '离床时长:' + parseInt(datas.value[3] / 60) + '小时' + datas.value[3] % 60 + '分钟</br>';
                                    return res;
                                }
                            },
                            color: '#E2B363',

                        }, {
                            name: 'REM',
                            data: rem,
                            type: 'custom',
                            // renderItem: This.renderItemsm2(),
                            renderItem: function(params,api){
                                return  This.renderItemsm2(params, api)
                            },
                            itemStyle: {
                                normal: {
                                    opacity: 0.8
                                }
                            },
                            encode: {
                                x: [1, 2],
                                y: 0
                            },
                            tooltip: {
                                formatter: function (datas) {

                                    var res = '';
                                    res += 'REM时间:' + datas.value[1] + '</br>';
                                    res += 'REM时间:' + datas.value[2] + '</br>';
                                    res += 'REM时长:' + parseInt(datas.value[3] / 60) + '小时' + datas.value[3] % 60 + '分钟</br>';
                                    return res;
                                }
                            },
                            color: '#77D2EF',

                        }


                    ]
                };
                let smpfChart = This.$echarts.init(document.getElementById('smpfChart'));
                smpfChart.clear();
                smpfChart.resize()
                smpfChart.setOption(optionpc);
                window.addEventListener("resize", function () {
                    smpfChart.resize();
                });
                //柱状图
                if (data.statistics_SleepDeep != null) {
                    fallAsleeps = parseInt(data.statistics_SleepDeep.lastNight.fallAsleep.total_hours) * 60 + data.statistics_SleepDeep.lastNight.fallAsleep.total_minutes;
                    leaveBeds = parseInt(data.statistics_SleepDeep.lastNight.leaveBed.total_hours) * 60 + data.statistics_SleepDeep.lastNight.leaveBed.total_minutes;
                    sleeps = parseInt(data.statistics_SleepDeep.lastNight.sleep.total_hours) * 60 + data.statistics_SleepDeep.lastNight.sleep.total_minutes;
                    stayBeds = parseInt(data.statistics_SleepDeep.lastNight.stayBed.total_hours) * 60 + data.statistics_SleepDeep.lastNight.stayBed.total_minutes;
                    stayBed = data.statistics_SleepDeep.lastNight.stayBed.total_hours + "h"
                        + data.statistics_SleepDeep.lastNight.stayBed.total_minutes + "m"
                    sleep = data.statistics_SleepDeep.lastNight.sleep.total_hours + "h"
                        + data.statistics_SleepDeep.lastNight.sleep.total_minutes + "m"
                    leaveBed = data.statistics_SleepDeep.lastNight.leaveBed.total_hours + "h"
                        + data.statistics_SleepDeep.lastNight.leaveBed.total_minutes + "m"
                    fallAsleep = data.statistics_SleepDeep.lastNight.fallAsleep.total_hours + "h"
                        + data.statistics_SleepDeep.lastNight.fallAsleep.total_minutes + "m"
                    zztdata.push({ name: '入睡时间', value: fallAsleeps, value1: fallAsleep })
                    zztdata.push({ name: '离床时间', value: leaveBeds, value1: leaveBed })
                    zztdata.push({ name: '睡觉时间', value: sleeps, value1: sleep })
                    zztdata.push({ name: '卧床时间', value: stayBeds, value1: stayBed })
                    
                    This.fallAsleeps = parseInt(data.statistics_SleepDeep.lastNight.fallAsleep.total_hours) * 60 + data.statistics_SleepDeep.lastNight.fallAsleep.total_minutes;
                    This.sleep_efficiency = Math.round(((This.Sleeptotal_yj_Hours*60+This.Sleeptotal_yj_Minutes)/(This.Sleeptotal_Hours*60+This.Sleeptotal_Minutes))*100);
                }
                let optionsmlaChartreport1 = {
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLabel: {
                            show: false,//不显示坐标轴上的文字
                        },
                        axisLine: {
                            show: false,//不显示坐标轴线
                        }, axisTick: {
                            show: false//不显示坐标轴刻度线
                        },
                        splitLine: {
                            show: false//不显示网格线
                        },
                    },
                    yAxis: {
                        type: 'category',
                        data: ['入睡时间', '离床', '睡觉时间', '卧床时间']
                    },
                    series: [
                        {
                            type: 'bar',
                            //data: [fallAsleeps, leaveBeds,sleeps,stayBeds],
                            data: zztdata,
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        var colorList = ["#8A8A8A", "#E2B363", "#5788C6", "#714890"];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },
                            label: {
                                show: true,
                                position: 'inside',
                                normal: {
                                    show: true,
                                    position: [10, 7],
                                    textStyle: {
                                        color: '#333'
                                    },
                                    formatter: function (params) {
                                        //params指的是 data 里面字典的参数，现在字典里用了name（装了公司名）、value（每个公司的销售）两个参数，
                                        //return params.name + "：" + params.value1;
                                        return params.data.value1
                                    },
                                }
                            }
                        }

                    ]
                };

                var smlaChartreport = This.$echarts.init(document.getElementById('smlaChartreport'));
                smlaChartreport.clear();
                smlaChartreport.resize()
                smlaChartreport.setOption(optionsmlaChartreport1);
                window.addEventListener("resize", function () {
                    smlaChartreport.resize();
                });
                //2020-07-02 新增
                var heartRatey = []
                for (let i = 0; i < data.deep.heartRate.heartRates.length; i++) {
                    heartRatey.push([data.deep.heartRate.heartRates[i].time.substring(0,5), data.statistics_SleepDeep.heartRate.heartRates[i].value])
                }
                This.heartRate_Minutes = data.deep.heartRate.avg ?data.deep.heartRate.avg:0
                var optionh = {
                    tooltip: {
                        trigger: 'axis'
                    },

                    grid: {
                        left: '1%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },

                    xAxis: {
                        data: AllTime2,
                        axisLabel: {
                            show: true,
                            interval: 119,

                            textStyle: {
                                color: '#333'
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        name: '',
                        min: function (value) {
                            return value.min - 0.5;
                        }
                    },
                    series: [
                        {
                            type: 'line',
                            data: heartRatey,
                            color: '#679FD2'
                        },

                    ]
                };
                let sbxlChart = This.$echarts.init(document.getElementById('sbxlChart'), 'macarons');

                sbxlChart.clear();
                sbxlChart.setOption(optionh);
                window.addEventListener("resize", function () {
                    sbxlChart.resize();
                });
                //呼吸率
                var hxly = []
                for (let i = 0; i < data.statistics_SleepDeep.breath.breathRates.length; i++) {
                    hxly.push([data.statistics_SleepDeep.breath.breathRates[i].time.substring(0,5), data.statistics_SleepDeep.breath.breathRates[i].value])
                }
                This.hxl_Minutes = data.statistics_SleepDeep.breath.avg.toFixed(2) ? data.statistics_SleepDeep.breath.avg.toFixed(2) : 0
                var optionhxl = {
                    tooltip: {
                        trigger: 'axis'
                    },

                    grid: {
                        left: '1%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },

                    xAxis: {
                        data: AllTime2,
                        axisLabel: {
                            show: true,
                            interval: 239,

                            textStyle: {
                                color: '#333'
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        name: '',
                        min: function (value) {
                            return value.min - 0.5;
                        }
                    },
                    series: [
                        {
                            type: 'line',
                            data: hxly,
                            color: '#679FD2'
                        },

                    ]
                };
                let sbhxlChart = This.$echarts.init(document.getElementById('sbhxlChart'), 'macarons');
                sbhxlChart.clear();
                sbhxlChart.setOption(optionhxl);
                window.addEventListener("resize", function () {
                    sbhxlChart.resize();
                });
                This.sbsmpf = data.statistics_SleepDeep.deep.score ? data.statistics_SleepDeep.deep.score:0

                
            })
        },// 当天日报
        async GetDailyReportAgo(){
            var This = this,query = this.currentUserId
            var data= {
                'userid':query,
                'date':This.selectDate
            }
            await new Promise(function (resolve) { //获取echarts数据
                GetSleepDeepInfo(JSON.stringify(data)).then((res) => {
                    resolve(res);
                })
            }).then(function (value) { //获取左侧数据
                var data2 = value
                GetDailyReportAgo(JSON.stringify(data)).then((res2) => {
                var AllTime = [], AllTime1 = [], AllUserName = [], AllTime2 = [], datamarkLine1 = [], datamarkLine = [];
                var dataSleep = [], dataSleeps = [],  dataOther = [], dataSleep1 = [];
                var time1 = This.addDate(new Date(), 0);
                var time = new Date(time1 + ' 00:00');
                var addTime = 60 * 1000;
                for (var i = 0; i < 1440; i++) {
                    if (i === 0) {
                        AllTime.push('0AM');
                        time = new Date(+time + addTime);
                        dataOther.push([query, '0AM', '09:59 ']);
                    } else if (i === 240) {
                        AllTime.push('4');
                        time = new Date(+time + addTime);
                    }
                    else if (i === 240 * 2) {
                        AllTime.push('8');
                        time = new Date(+time + addTime);
                    }
                    else if (i === 240 * 3) {
                        AllTime.push('12AM');
                        time = new Date(+time + addTime);
                    }
                    else if (i === 240 * 4) {
                        AllTime.push('16');
                        time = new Date(+time + addTime);
                    }
                    else if (i === 240 * 5) {
                        AllTime.push('20');
                        time = new Date(+time + addTime);
                        dataOther.push(['20', query]);
                    }
                    else {
                        AllTime.push(time.Format("hh:mm"));
                        time = new Date(+time + addTime);
                    }
                }
                for (var j = 0; j <= 720 + 240; j++) {
                    if (j === 0) {
                        AllTime.push('0AM ');
                        time = new Date(+time + addTime);
                    }
                    else if (j === 240) {
                        AllTime.push('4 ');
                        time = new Date(+time + addTime);
                    }
                    else if (j === 240 * 2) {
                        AllTime.push('8 ');
                        time = new Date(+time + addTime);
                    }
                    else if (j === 600) {
                        AllTime.push('10AM ');
                        dataOther.push(['10AM ', query]);
                    }
                    if (j === 720) {
                        AllTime.push('12AM ');
                        dataOther.push(['12AM ', query]);
                    }
                    else {
                        if (j < 950) {
                            AllTime.push(time.Format("hh:mm") + " ");
                            time = new Date(+time + addTime);
                        } else {
                            AllTime.push('16PM');
                            time = new Date(+time + addTime);
                        }
                    }
                }
                var data = res2 
                if (data.isValid == 0) {
                    if (data.excludedReason != null) {
                        This.isvaildReportLabel = '本日无报告:' + data.excludedReason
                    } else {
                        This.isvaildReportLabel = ''
                    }
                    This.day_model = false
                } else {
                    This.day_model = true
                    This.isvaildReportLabel = ''
                }
                This.Sleeptotal_Hours = data.sleep.total_hours ? data.sleep.total_hours : 0
                This.Sleeptotal_Minutes = data.sleep.total_minutes ? data.sleep.total_minutes : 0
                This.Sleeptotal_yj_Hours = data2.lastNight.sleep.total_hours
                This.Sleeptotal_yj_Minutes = data2.lastNight.sleep.total_minutes
                This.shangchuangtime = data.gobed.slice(0,5) + (data.gobed.slice(0,2) <= 12 ? 'am' : 'pm')
                This.qichuangtime = data.getup.slice(0,5) + (data.getup.slice(0,2) <= 12 ? 'am' : 'pm')
                This.qiyecishu = data.nightup.length ? data.nightup.length : 0
                //柱状图
                var fallAsleep, leaveBed, sleep, stayBed
                var fallAsleeps = [], leaveBeds = [], sleeps = [], stayBeds = [];
                var zztdata = []
                data.statistics_SleepDeep = data2
                if (data.statistics_SleepDeep != null) {
                    fallAsleeps = parseInt(data.statistics_SleepDeep.lastNight.fallAsleep.total_hours) * 60 + data.statistics_SleepDeep.lastNight.fallAsleep.total_minutes;
                    leaveBeds = parseInt(data.statistics_SleepDeep.lastNight.leaveBed.total_hours) * 60 + data.statistics_SleepDeep.lastNight.leaveBed.total_minutes;
                    sleeps = parseInt(data.statistics_SleepDeep.lastNight.sleep.total_hours) * 60 + data.statistics_SleepDeep.lastNight.sleep.total_minutes;
                    stayBeds = parseInt(data.statistics_SleepDeep.lastNight.stayBed.total_hours) * 60 + data.statistics_SleepDeep.lastNight.stayBed.total_minutes;
                    stayBed = data.statistics_SleepDeep.lastNight.stayBed.total_hours + "h"
                        + data.statistics_SleepDeep.lastNight.stayBed.total_minutes + "m"
                    sleep = data.statistics_SleepDeep.lastNight.sleep.total_hours + "h"
                        + data.statistics_SleepDeep.lastNight.sleep.total_minutes + "m"
                    leaveBed = data.statistics_SleepDeep.lastNight.leaveBed.total_hours + "h"
                        + data.statistics_SleepDeep.lastNight.leaveBed.total_minutes + "m"
                    fallAsleep = data.statistics_SleepDeep.lastNight.fallAsleep.total_hours + "h"
                        + data.statistics_SleepDeep.lastNight.fallAsleep.total_minutes + "m"
                    zztdata.push({ name: '入睡时间', value: fallAsleeps, value1: fallAsleep })
                    zztdata.push({ name: '离床时间', value: leaveBeds, value1: leaveBed })
                    zztdata.push({ name: '睡觉时间', value: sleeps, value1: sleep })
                    zztdata.push({ name: '卧床时间', value: stayBeds, value1: stayBed })
                }
                var smsdy = []
                var deepPercent, lightPercent, leavePercent, aweekPercent, remPercent
                var deepPercents, lightPercents, leavePercents, aweekPercents, remPercents
                //算占比
                data.deep = data2
                let totalminite1 = (data.deep.deep.deep_duration.total_hours)*60+data.deep.deep.deep_duration.total_minutes
                let totalminite2 = (data.deep.deep.light_duration.total_hours)*60+data.deep.deep.light_duration.total_minutes
                let totalminite3 = (data.deep.deep.aweek_duration.total_hours)*60+data.deep.deep.aweek_duration.total_minutes
                let totalminite4 = (data.deep.deep.leave_duration.total_hours)*60+data.deep.deep.leave_duration.total_minutes
                let totalminite5 =  (data.deep.deep.rem_duration.total_hours)*60+data.deep.deep.rem_duration.total_minutes
                let totalminute = totalminite1+totalminite2+totalminite3+totalminite4+totalminite5
                deepPercent = (totalminute==0) ? 0 : Math.round((totalminite1 / totalminute).toFixed(2)*100)        
                lightPercent= (totalminute==0) ? 0 : Math.round((totalminite2 / totalminute).toFixed(2)*100)       
                leavePercent=(totalminute==0) ? 0 : Math.round((totalminite4 / totalminute).toFixed(2)*100)  
                remPercent= (totalminute==0) ? 0 : Math.round((totalminite5 / totalminute).toFixed(2)*100) 
                aweekPercent= (totalminute==0) ? 0 : (100- deepPercent -lightPercent-leavePercent-remPercent)
                var zztdata1 = []
                smsdy.push(deepPercent + '%')
                smsdy.push(lightPercent + '%')
                smsdy.push(aweekPercent + '%')
                smsdy.push(leavePercent + '%')
                smsdy.push(remPercent + '%')

                if (data.deep != null) {
                    aweekPercents = data.deep.deep.aweek_duration.total_hours
                        + 'h' + data.deep.deep.aweek_duration.total_minutes + 'm'
                    leavePercents = data.deep.deep.leave_duration.total_hours
                        + 'h' + data.deep.deep.leave_duration.total_minutes + 'm'
                    lightPercents = data.deep.deep.light_duration.total_hours
                        + 'h' + data.deep.deep.light_duration.total_minutes + 'm'
                    deepPercents = data.deep.deep.deep_duration.total_hours
                        + 'h' + data.deep.deep.deep_duration.total_minutes + 'm'
                    remPercents = data.deep.deep.rem_duration.total_hours
                        + 'h' + data.deep.deep.rem_duration.total_minutes + 'm'
                    zztdata1.push({ name: smsdy[0], value: deepPercent, value1: deepPercents,value2:'深睡' })
                    zztdata1.push({ name: smsdy[1], value: lightPercent, value1: lightPercents,value2:'浅睡' })
                    zztdata1.push({ name: smsdy[2], value: aweekPercent, value1: aweekPercents,value2:'清醒' })
                    zztdata1.push({ name: smsdy[3], value: leavePercent, value1: leavePercents,value2:'离床' })
                    zztdata1.push({ name: smsdy[4], value: remPercent, value1: remPercents,value2:'rem' })
                }
                var optionzzt1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.value2 + ':' + params[0].data.name;
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLabel: {
                            show: false,//不显示坐标轴上的文字
                        },
                        axisLine: {
                            show: false,//不显示坐标轴线
                        }, axisTick: {
                            show: false//不显示坐标轴刻度线
                        }, splitLine: {
                            show: false//不显示网格线
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: smsdy,
                        axisTick: {
                            show: false//不显示坐标轴刻度线
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            data: zztdata1,

                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        //var colorList = ["#8A8A8A", "#5788C6", "#714890","#77D2EF"];
                                        //var colorList = ["#77D2EF", '#E2B363', "#714890", "#5788C6", "#8A8A8A"];
                                        // var colorList = ["#714890", '#5788C6', '#77D2EF', '#8A8A8A', '#E2B363'];
                                        var colorList = ["#714890", '#5788C6', '#8A8A8A', '#E2B363', '#77D2EF'];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },
                            label: {
                                show: true,
                                position: [10, 7],
                                textStyle: {
                                    color: '#333'
                                },
                                formatter: function (params) {
                                    //params指的是 data 里面字典的参数，现在字典里用了name（装了公司名）、value（每个公司的销售）两个参数，
                                    // return params.name + "：" + params.value1;
                                    return params.data.value1
                                },
                            }
                        }

                    ]
                };
                let smsdChart = This.$echarts.init(document.getElementById('smsdChart'));
                smsdChart.clear();
                smsdChart.resize()
                smsdChart.setOption(optionzzt1);
                window.addEventListener("resize", function () {
                    smsdChart.resize();
                });
                //夜间睡眠
                if (data.sleep != null) {
                    for (var k = 0; k < data.sleep.times.length; k++) {
                        var endtime1 = data.sleep.times[k].time;
                        var endtimemin1 = endtime1.slice(3,5);
                        endtime1 = new Date(This.selectDate+' '+endtime1)
                        endtime1.setMinutes(endtimemin1 + data.sleep.times[k].duration);
                        //  var endtime1 = new Date(data.timePoint_GetUp).Format('hh:mm ');
                        // var days = This.datedifference(new Date(endtime1).Format('yyyy-MM-dd'), new Date(data.statistics_Sleep.activeArray[k].timePoint).Format('yyyy-MM-dd'));
                        if (k == data.sleep.times.length - 1) {
                            if (data.sleep.times[k].time.slice(0,2) >= 0 && data.sleep.times[k].time.slice(0,2) < 12) {
                                var   sleepstart = data.sleep.times[k].time.slice(0,5)+ ' '
                                // sleepend = new Date(endtime1).Format('hh:mm ');
                            } else {
                                sleepstart = sleepstart = data.sleep.times[k].time.slice(0,5)+ ' '
                                // sleepend = new Date(endtime1).Format('hh:mm');

                                // if (days == 0) {
                                //     // sleepend = new Date(endtime1).Format('hh:mm');
                                // }
                                // else {
                                //     // sleepend = new Date(endtime1).Format('hh:mm ');
                                // }
                            }
                            var start, end
                            start = new Date(This.selectDate+' '+data.sleep.times[k].time)
                            end = new Date(start.getTime() + (1000 * 60 * data.sleep.times[k].duration))
                            dataSleep.push([
                                data.userID,
                                start.Format('hh:mm'),
                                end.Format('hh:mm'),
                                data.sleep.times[k].duration
                            ]);
                            dataSleeps.push([
                                data.userID,
                                data.gobed.slice(0,5)+' ',
                                data.getup.slice(0,5)+' ',
                                data.sleep.times[k].duration
                            ]);

                            datamarkLine.push({
                                xAxis: data.gobed.slice(0,5)+' ', name: 'W', lineStyle: { color: '#6495ED', type: 'solid', width: 5 }, label:
                                {
                                    formatter: 'W'
                                }
                            });
                            datamarkLine.push({
                                xAxis: sleepstart, name: 'S', lineStyle: { color: '#ED7762', type: 'solid', width: 5 }, label:
                                {
                                    formatter: 'S'
                                }
                            });
                        } else {
                            start = new Date(This.selectDate+' '+data.sleep.times[k].time)
                            end = new Date(start.getTime() + (1000 * 60 * data.sleep.times[k].duration))
                            dataSleep.push([
                                data.userID,
                                start.Format('hh:mm'),
                                end.Format('hh:mm'),
                                data.sleep.times[k].duration
                            ]);
                            dataSleeps.push([
                                data.userID,
                                    data.gobed.slice(0,5)+' ',
                                data.getup.slice(0,5)+' ',
                                data.sleep.times[k].duration
                            ]);
                        }
                    }
                }
                if (dataSleep.length > 1) {
                    dataSleep1.push(dataSleep[dataSleep.length - 1])
                } else {
                    dataSleep1.push(dataSleep[0])
                }
                AllUserName.push(query);
                for (let i = 1200 - 240; i < AllTime.length; i++) {
                    AllTime1.push(AllTime[i])
                    if (AllTime[i] == '11:59 ') {
                        AllTime2.push('12AM')
                        AllTime2.push('11:59')
                    }
                    else if (AllTime[i] == '20') {
                        //   AllTime2.push('0AM')
                        AllTime2.push('20:00')
                    }
                    else if (AllTime[i] == '0AM ') {
                        //   AllTime2.push('0AM')
                        AllTime2.push('00:00')
                    }
                    else if (AllTime[i] == '4AM ') {
                        AllTime2.push('04:00')
                        // AllTime2.push('4AM')

                    }
                    else if (AllTime[i] == '8AM ') {
                        //   AllTime2.push('8AM')
                        AllTime2.push('08:00')
                    }
                    else {
                        AllTime2.push(AllTime[i].replace(/\s*/g, ''))
                    }

                }
            
                //起夜
                for (var n = 0; n < data.nightup.length; n++) {
                    // var days1 = This.datedifference(new Date(data.timePoints_NightUp[n]).Format('yyyy-MM-dd'), new Date(data.statistics_Sleep.activeArray[data.statistics_Sleep.activeArray.length - 1].timePoint).Format('yyyy-MM-dd'));
                    
                    // if (days1 == 0) {
                    //     var   dataNightUp = data.nightup[n].slice(0,5);
                    // } else {
                    //     dataNightUp = data.nightup[n].slice(0,5);
                    // }
                    var   dataNightUp = data.nightup[n].slice(0,5);
                    datamarkLine.push({
                        xAxis: dataNightUp, name: 'N', lineStyle: { color: '#FFD700', type: 'solid', width: 3 }, label:
                        {
                            formatter: 'N'
                        }
                    });
                    datamarkLine1.push({
                        xAxis: data.nightup[n].slice(0,5), name: 'N', lineStyle: { color: '#FFD700', type: 'solid', width: 3 }, label:
                        {
                            formatter: 'N'
                        }
                    });
                    // dataNightUpCount++;
                }
                var option33 = {
                    tooltip: {
                        formatter: function (datas) {

                            var res = '';
                            if (datas.name == 'S') {

                                res += '上床时间:' + '</br>';
                                res += datas.value;
                            } else if (datas.name == 'W') {
                                res += '起床时间:' + '</br>';
                                res += datas.value;
                            }
                            else if (datas.name == 'N') {
                                res += '起夜时间:' + '</br>';
                                res += datas.value;
                            }
                            else if (datas.seriesName == '外出') {
                                res += '外出时间:' + datas.value[1] + '</br>';
                                res += '返回时间:' + datas.value[2] + '</br>';
                                res += '时长:' + datas.value[3] + '分钟</br>';
                            }
                            else if (datas.seriesName == '休息') {
                                //res += '休息时间:' + datas.value[1] + '</br>';
                                ////res += '返回时间:' + datas.value[2] + '</br>';
                                //res += '时长:' + datas.value[3] + '分钟</br>';
                            }
                            return res;
                        }
                    },
                    grid: {
                        top: '10%',
                        left: '20',
                        right: '20',
                        bottom: '10',
                        containLabel: true
                    },

                    //legend: {
                    //    //data: ['休息', '外出', '外出返回', '午休', '看电视', '聊天', '睡觉', '起夜', '其他']
                    //    //data: ['休息', '外出']
                    //},

                    xAxis: {
                        //name: '时间',
                        type: 'category',
                        data: AllTime2,
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisLabel: {
                            interval: 239,
                            rotate: 0,
                            showMaxLabel: true
                        }



                    },
                    yAxis: {
                        //name: '用户ID',
                        type: 'category',
                        data: AllUserName,
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisLine: { //y轴
                            show: false

                        },
                        axisLabel: {
                            show: false,//不显示坐标轴上的文字
                        },
                        scale: true
                    },

                    series: [
                        {
                            name: '休息',
                            //data: dataSleep1,
                            data: dataSleep,
                            type: 'custom',
                            renderItem: This.renderItem,
                            itemStyle: {
                                normal: {
                                    opacity: 0.8
                                }
                            },
                            tooltip: {
                                formatter: function (datas) {
                                    var res = '';
                                    res += '上床时间:' + datas.value[1] + '</br>';
                                    res += '下床时间:' + datas.value[2] + '</br>';
                                    res += '睡眠时长:' + data.deep.lastNight.sleep.total_hours + '小时' + data.deep.lastNight.sleep.total_minutes + '分钟</br>';
                                    return res;
                                }
                            },
                            encode: {
                                x: [1, 2],
                                y: 0
                            },
                            //type: 'line',
                            color: '#764B97',
                            //markLine: {


                            //    symbol: 'none', //标示线，虚线去掉箭头
                            //    data: datamarkLine

                            //}
                            markLine: {
                                symbol: 'none', //标示线，虚线去掉箭头
                                data: datamarkLine1

                            }
                        }
                    ]
                };
                let inbedChart = This.$echarts.init(document.getElementById('inbedChart'));
                inbedChart.clear();
                inbedChart.resize()
                inbedChart.setOption(option33);
                window.addEventListener("resize", function () {
                    inbedChart.resize();
                });
                //睡眠评分2222
                var shenshui = [], qianshui = [], qingxing = [], lichuang = [], rem = []
                if (data.statistics_SleepDeep != null) {
                    for (let i = 0; i < data.statistics_SleepDeep.deep.deep_duration.times.length; i++) {
                        // let endtime1 = new Date(data.statistics_SleepDeep.deep.deep_duration.activeArray[i].timePoint);
                        // let endtimemin1 = endtime1.getMinutes();
                        // endtime1.setMinutes(endtimemin1 + data.statistics_SleepDeep.deep.deep_duration.activeArray[i].duration);
                        shenshui.push([
                            data.userID,
                            // new Date(data.statistics_SleepDeep.deep.deep_duration.activeArray[i].timePoint).Format('hh:mm'),
                            // new Date(endtime1).Format('hh:mm'),
                            data.statistics_SleepDeep.deep.deep_duration.times[i].time_begin.substring(0,5),
                            data.statistics_SleepDeep.deep.deep_duration.times[i].time_end.substring(0,5),
                            data.statistics_SleepDeep.deep.deep_duration.times[i].duration
                        ]);
                    }
                    for (let i = 0; i < data.statistics_SleepDeep.deep.light_duration.times.length; i++) {
                        // let endtime1 = new Date(data.statistics_SleepDeep.deep.light_duration.activeArray[i].timePoint);
                        // let endtimemin1 = endtime1.getMinutes();
                        // endtime1.setMinutes(endtimemin1 + data.statistics_SleepDeep.deep.light_duration.activeArray[i].duration);
                        qianshui.push([
                            data.userID,
                            // new Date(data.statistics_SleepDeep.deep.light_duration.activeArray[i].timePoint).Format('hh:mm'),
                            // new Date(endtime1).Format('hh:mm'),
                            data.statistics_SleepDeep.deep.light_duration.times[i].time_begin.substring(0,5),
                            data.statistics_SleepDeep.deep.light_duration.times[i].time_end.substring(0,5),
                            data.statistics_SleepDeep.deep.light_duration.times[i].duration
                        ]);
                    }
                    for (let i = 0; i < data.statistics_SleepDeep.deep.aweek_duration.times.length; i++) {
                        // let endtime1 = new Date(data.statistics_SleepDeep.deep.aweek_duration.activeArray[i].timePoint);
                        // let endtimemin1 = endtime1.getMinutes();
                        // endtime1.setMinutes(endtimemin1 + data.statistics_SleepDeep.deep.aweek_duration.activeArray[i].duration);
                        qingxing.push([
                            data.userID,
                            // new Date(data.statistics_SleepDeep.deep.aweek_duration.activeArray[i].timePoint).Format('hh:mm'),
                            // new Date(endtime1).Format('hh:mm'),
                            data.statistics_SleepDeep.deep.aweek_duration.times[i].time_begin.substring(0,5),
                            data.statistics_SleepDeep.deep.aweek_duration.times[i].time_end.substring(0,5),
                            data.statistics_SleepDeep.deep.aweek_duration.times[i].duration
                        ]);
                    }

                    for (let i = 0; i < data.statistics_SleepDeep.deep.leave_duration.times.length; i++) {
                        // let endtime1 = new Date(data.statistics_SleepDeep.deep.leave_duration.activeArray[i].timePoint);
                        // let endtimemin1 = endtime1.getMinutes();
                        // endtime1.setMinutes(endtimemin1 + data.statistics_SleepDeep.deep.leave_duration.activeArray[i].duration);
                        lichuang.push([
                            data.userID,
                            // new Date(data.statistics_SleepDeep.deep.leave_duration.activeArray[i].timePoint).Format('hh:mm'),
                            // new Date(endtime1).Format('hh:mm'),
                            data.statistics_SleepDeep.deep.leave_duration.times[i].time_begin.substring(0,5),
                            data.statistics_SleepDeep.deep.leave_duration.times[i].time_end.substring(0,5),
                            data.statistics_SleepDeep.deep.leave_duration.times[i].duration
                        ]);
                    }

                    for (let i = 0; i < data.statistics_SleepDeep.deep.rem_duration.times.length; i++) {
                        // let endtime1 = new Date(data.statistics_SleepDeep.deep.rem_duration.activeArray[i].timePoint);
                        // let endtimemin1 = endtime1.getMinutes();
                        // endtime1.setMinutes(endtimemin1 + data.statistics_SleepDeep.deep.rem_duration.activeArray[i].duration);
                        rem.push([
                            data.userID,
                            // new Date(data.statistics_SleepDeep.deep.rem_duration.activeArray[i].timePoint).Format('hh:mm'),
                            // new Date(endtime1).Format('hh:mm'),
                            data.statistics_SleepDeep.deep.rem_duration.times[i].time_begin.substring(0,5),
                            data.statistics_SleepDeep.deep.rem_duration.times[i].time_end.substring(0,5),
                            data.statistics_SleepDeep.deep.rem_duration.times[i].duration
                        ]);
                    }
                }
                var optionpc = {
                    tooltip: {
                        formatter: function (datas) {
                            var res = '';
                            if (datas.name == 'S') {
                                res += '上床时间:' + '</br>';
                                res += datas.value;
                            } else if (datas.name == 'W') {
                                res += '起床时间:' + '</br>';
                                res += datas.value;
                            }
                            else if (datas.name == 'N') {
                                res += '起夜时间:' + '</br>';
                                res += datas.value;
                            }
                            else if (datas.seriesName == '外出') {
                                res += '外出时间:' + datas.value[1] + '</br>';
                                res += '返回时间:' + datas.value[2] + '</br>';
                                res += '时长:' + datas.value[3] + '分钟</br>';
                            }
                            else if (datas.seriesName == '休息') {
                                //res += '休息时间:' + datas.value[1] + '</br>';
                                ////res += '返回时间:' + datas.value[2] + '</br>';
                                //res += '时长:' + datas.value[3] + '分钟</br>';
                            }
                            return res;
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '20',
                        right: '20',
                        bottom: '40',
                        containLabel: true
                    },
                    xAxis: {
                        //name: '时间',
                        type: 'category',
                        data: AllTime2,
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisLabel: {
                            interval: 239,
                            rotate: 0,
                            showMaxLabel: true
                        }



                    },
                    yAxis: {
                        //name: '用户ID',
                        type: 'category',
                        data: AllUserName,
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisLine: { //y轴
                            show: false

                        },
                        axisLabel: {
                            show: false,//不显示坐标轴上的文字
                        },
                        scale: true
                    },

                    series: [
                        {
                            name: '深睡',
                            data: shenshui,
                            type: 'custom',
                            renderItem: function(params,api){
                                return This.renderItemsm(params, api)
                            },
                            // renderItem:This.renderItemsm(),
                            itemStyle: {
                                normal: {
                                    opacity: 0.8
                                }
                            },
                            tooltip: {
                                formatter: function (datas) {

                                    var res = '';
                                    res += '深睡时间:' + datas.value[1] + '</br>';
                                    res += '深睡时间:' + datas.value[2] + '</br>';

                                    res += '深睡时长:' + parseInt(datas.value[3] / 60) + '小时' + datas.value[3] % 60 + '分钟</br>';

                                    return res;
                                }
                            },
                            encode: {
                                x: [1, 2],
                                y: 0
                            },
                            //type: 'line',
                            color: '#714890',

                        }
                        , {
                            name: '浅睡',
                            data: qianshui,
                            type: 'custom',
                            // renderItem: This.renderItemsm1(),
                            renderItem: function(params,api){
                                return This.renderItemsm1(params, api)
                            },
                            itemStyle: {
                                normal: {
                                    opacity: 0.8
                                }
                            },
                            encode: {
                                x: [1, 2],
                                y: 0
                            },
                            tooltip: {
                                formatter: function (datas) {

                                    var res = '';
                                    res += '浅睡时间:' + datas.value[1] + '</br>';
                                    res += '浅睡时间:' + datas.value[2] + '</br>';
                                    res += '浅睡时长:' + parseInt(datas.value[3] / 60) + '小时' + datas.value[3] % 60 + '分钟</br>';
                                    return res;
                                }
                            },
                            'color': '#5788C6',

                        }
                        , {
                            name: '清醒',
                            data: qingxing,
                            type: 'custom',
                            // renderItem: This.renderItemsm2(),
                            renderItem: function(params,api){
                                return This.renderItemsm2(params, api)
                            },
                            itemStyle: {
                                normal: {
                                    opacity: 0.8
                                }
                            },
                            encode: {
                                x: [1, 2],
                                y: 0
                            }
                            ,
                            tooltip: {
                                formatter: function (datas) {

                                    var res = '';
                                    res += '清醒时间:' + datas.value[1] + '</br>';
                                    res += '清醒时间:' + datas.value[2] + '</br>';
                                    res += '清醒时长:' + parseInt(datas.value[3] / 60) + '小时' + datas.value[3] % 60 + '分钟</br>';
                                    return res;
                                }
                            },
                            color: '#8A8A8A',

                        }, {
                            name: '离床',
                            data: lichuang,
                            type: 'custom',
                            // renderItem: This.renderItemsm2(),
                                renderItem: function(params,api){
                                return This.renderItemsm2(params, api)
                            },
                            itemStyle: {
                                normal: {
                                    opacity: 0.8
                                }
                            },
                            encode: {
                                x: [1, 2],
                                y: 0
                            },
                            tooltip: {
                                formatter: function (datas) {

                                    var res = '';
                                    res += '离床时间:' + datas.value[1] + '</br>';
                                    res += '离床时间:' + datas.value[2] + '</br>';
                                    res += '离床时长:' + parseInt(datas.value[3] / 60) + '小时' + datas.value[3] % 60 + '分钟</br>';
                                    return res;
                                }
                            },
                            color: '#E2B363',

                        }, {
                            name: 'REM',
                            data: rem,
                            type: 'custom',
                            // renderItem: This.renderItemsm2(),
                            renderItem: function(params,api){
                                return  This.renderItemsm2(params, api)
                            },
                            itemStyle: {
                                normal: {
                                    opacity: 0.8
                                }
                            },
                            encode: {
                                x: [1, 2],
                                y: 0
                            },
                            tooltip: {
                                formatter: function (datas) {

                                    var res = '';
                                    res += 'REM时间:' + datas.value[1] + '</br>';
                                    res += 'REM时间:' + datas.value[2] + '</br>';
                                    res += 'REM时长:' + parseInt(datas.value[3] / 60) + '小时' + datas.value[3] % 60 + '分钟</br>';
                                    return res;
                                }
                            },
                            color: '#77D2EF',

                        }


                    ]
                };
                let smpfChart = This.$echarts.init(document.getElementById('smpfChart'));
                smpfChart.clear();
                smpfChart.resize()
                smpfChart.setOption(optionpc);
                window.addEventListener("resize", function () {
                    smpfChart.resize();
                });
                //柱状图
                if (data.statistics_SleepDeep != null) {
                    fallAsleeps = parseInt(data.statistics_SleepDeep.lastNight.fallAsleep.total_hours) * 60 + data.statistics_SleepDeep.lastNight.fallAsleep.total_minutes;
                    leaveBeds = parseInt(data.statistics_SleepDeep.lastNight.leaveBed.total_hours) * 60 + data.statistics_SleepDeep.lastNight.leaveBed.total_minutes;
                    sleeps = parseInt(data.statistics_SleepDeep.lastNight.sleep.total_hours) * 60 + data.statistics_SleepDeep.lastNight.sleep.total_minutes;
                    stayBeds = parseInt(data.statistics_SleepDeep.lastNight.stayBed.total_hours) * 60 + data.statistics_SleepDeep.lastNight.stayBed.total_minutes;
                    stayBed = data.statistics_SleepDeep.lastNight.stayBed.total_hours + "h"
                        + data.statistics_SleepDeep.lastNight.stayBed.total_minutes + "m"
                    sleep = data.statistics_SleepDeep.lastNight.sleep.total_hours + "h"
                        + data.statistics_SleepDeep.lastNight.sleep.total_minutes + "m"
                    leaveBed = data.statistics_SleepDeep.lastNight.leaveBed.total_hours + "h"
                        + data.statistics_SleepDeep.lastNight.leaveBed.total_minutes + "m"
                    fallAsleep = data.statistics_SleepDeep.lastNight.fallAsleep.total_hours + "h"
                        + data.statistics_SleepDeep.lastNight.fallAsleep.total_minutes + "m"
                    zztdata.push({ name: '入睡时间', value: fallAsleeps, value1: fallAsleep })
                    zztdata.push({ name: '离床时间', value: leaveBeds, value1: leaveBed })
                    zztdata.push({ name: '睡觉时间', value: sleeps, value1: sleep })
                    zztdata.push({ name: '卧床时间', value: stayBeds, value1: stayBed })

                    This.fallAsleeps = parseInt(data.statistics_SleepDeep.lastNight.fallAsleep.total_hours) * 60 + data.statistics_SleepDeep.lastNight.fallAsleep.total_minutes;
                    This.sleep_efficiency = Math.round(((This.Sleeptotal_yj_Hours*60+This.Sleeptotal_yj_Minutes)/(This.Sleeptotal_Hours*60+This.Sleeptotal_Minutes))*100);
                }
                let optionsmlaChartreport1 = {
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLabel: {
                            show: false,//不显示坐标轴上的文字
                        },
                        axisLine: {
                            show: false,//不显示坐标轴线
                        }, axisTick: {
                            show: false//不显示坐标轴刻度线
                        },
                        splitLine: {
                            show: false//不显示网格线
                        },
                    },
                    yAxis: {
                        type: 'category',
                        data: ['入睡时间', '离床', '睡觉时间', '卧床时间']
                    },
                    series: [
                        {
                            type: 'bar',
                            //data: [fallAsleeps, leaveBeds,sleeps,stayBeds],
                            data: zztdata,
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        var colorList = ["#8A8A8A", "#E2B363", "#5788C6", "#714890"];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },
                            label: {
                                show: true,
                                position: 'inside',
                                normal: {
                                    show: true,
                                    position: [10, 7],
                                    textStyle: {
                                        color: '#333'
                                    },
                                    formatter: function (params) {
                                        //params指的是 data 里面字典的参数，现在字典里用了name（装了公司名）、value（每个公司的销售）两个参数，
                                        //return params.name + "：" + params.value1;
                                        return params.data.value1
                                    },
                                }
                            }
                        }

                    ]
                };

                var smlaChartreport = This.$echarts.init(document.getElementById('smlaChartreport'));
                smlaChartreport.clear();
                smlaChartreport.resize()
                smlaChartreport.setOption(optionsmlaChartreport1);
                window.addEventListener("resize", function () {
                    smlaChartreport.resize();
                });
                //2020-07-02 新增
                var heartRatey = []
                for (let i = 0; i < data2.heartRate.heartRates.length; i++) {
                    let  value = data.statistics_SleepDeep.heartRate.heartRates[i].value == -1 ? null : data.statistics_SleepDeep.heartRate.heartRates[i].value
                    heartRatey.push([data2.heartRate.heartRates[i].time.substring(0,5),value ])
                }

                This.heartRate_Minutes = data2.heartRate.avg ?data2.heartRate.avg:0
                var optionh = {
                    tooltip: {
                        trigger: 'axis'
                    },

                    grid: {
                        left: '1%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },

                    xAxis: {
                        data: AllTime2,
                        axisLabel: {
                            show: true,
                            interval: 119,

                            textStyle: {
                                color: '#333'
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        name: '',
                        min: function (value) {
                            return value.min - 0.5;
                        }
                    },
                    series: [
                        {
                            type: 'line',
                            data: heartRatey,
                            color: '#679FD2'
                        },

                    ]
                };
                let sbxlChart = This.$echarts.init(document.getElementById('sbxlChart'), 'macarons');

                sbxlChart.clear();
                sbxlChart.setOption(optionh);
                window.addEventListener("resize", function () {
                    sbxlChart.resize();
                });
                //呼吸率
                var hxly = []
                for (let i = 0; i < data2.breath.breathRates.length; i++) {
                    let value = data2.breath.breathRates[i].value == -1 ? null :data2.breath.breathRates[i].value
                    hxly.push([data2.breath.breathRates[i].time.substring(0,5), value])
                }
                This.hxl_Minutes = data2.breath.avg.toFixed(2) ? data2.breath.avg.toFixed(2) : 0
                var optionhxl = {
                    tooltip: {
                        trigger: 'axis'
                    },

                    grid: {
                        left: '1%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },

                    xAxis: {
                        data: AllTime2,
                        axisLabel: {
                            show: true,
                            interval: 239,

                            textStyle: {
                                color: '#333'
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        name: '',
                        min: function (value) {
                            return value.min - 0.5;
                        }
                    },
                    series: [
                        {
                            type: 'line',
                            data: hxly,
                            color: '#679FD2'
                        },

                    ]
                };
                let sbhxlChart = This.$echarts.init(document.getElementById('sbhxlChart'), 'macarons');
                sbhxlChart.clear();
                sbhxlChart.setOption(optionhxl);
                window.addEventListener("resize", function () {
                    sbhxlChart.resize();
                });
                This.sbsmpf = data.statistics_SleepDeep.deep.score ? data.statistics_SleepDeep.deep.score:0
            })
        
            }).catch(function (err) {
                console.log(err);
            }).finally(function () {
                console.log("End");
            });
        },//历史日报
        logout() {
            this.$router.push("/");
        },
        addDate(date, days) {
            var d = new Date(date);
            d.setDate(d.getDate() + days);
            var month = d.getMonth() + 1;
            var day = d.getDate();
            if (month < 10) {
                month = "0" + month;
            }
            if (day < 10) {
                day = "0" + day;
            }
            var val = d.getFullYear() + "-" + month + "-" + day;
            return val;
        },
        datedifference(sDate1, sDate2) {
            var dateSpan,
                iDays;
            sDate1 = Date.parse(sDate1);
            sDate2 = Date.parse(sDate2);
            dateSpan = sDate2 - sDate1;
            dateSpan = Math.abs(dateSpan);
            iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
            return iDays
        },
        // echarts自定义系列的图形渲染逻辑
        renderItem(params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 0.6;
            // 如果矩形超出了当前坐标系的包围盒，则剪裁这个矩形
            // 位置和大小
            var rectShape = this.$echarts.graphic.clipRectByRect({
                x: start[0],
                //y: start[1] - height / 2,
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height
                //height:13
            }, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            });

            return rectShape && {
                type: 'rect',
                shape: rectShape,
                style: api.style()
            };
        },
        renderItemsm(params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 1;

            var rectShape = this.$echarts.graphic.clipRectByRect({
                x: start[0],
                //y: start[1] - height / 20,
                //y: start[1]-10,
                y: start[1],
                width: end[0] - start[0],
                height: height
                //height:13
            }, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            });

            return rectShape && {
                type: 'rect',
                shape: rectShape,
                style: api.style()
            };
        },
        renderItemsm1(params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 1;

            var rectShape = this.$echarts.graphic.clipRectByRect({
                x: start[0],
                //y: start[1] - height / 2,
                y: start[1] - 35,
                width: end[0] - start[0],
                height: height
                //height:13
            }, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            });

            return rectShape && {
                type: 'rect',
                shape: rectShape,
                style: api.style()
            };
        },
        renderItemsm2(params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 1;

            var rectShape = this.$echarts.graphic.clipRectByRect({
                x: start[0],
                //y: start[1] - height / 2,
                y: start[1] - 65,
                width: end[0] - start[0],
                height: height
                //height:13
            }, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            });

            return rectShape && {
                type: 'rect',
                shape: rectShape,
                style: api.style()
            };
        },
        renderItemsm3(params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 3;

            var rectShape = this.$echarts.graphic.clipRectByRect({
                x: start[0],
                //y: start[1] - height / 2,
                y: start[1] - 50,
                width: end[0] - start[0],
                height: height
                //height:13
            }, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            });

            return rectShape && {
                type: 'rect',
                shape: rectShape,
                style: api.style()
            };
        }
    }
  }
  </script>

  <style scoped>
  .topIcon,
  .topIcon img {
    width: 56px;
    height: 56px;
    margin-right: 32px;
    position: absolute;
    right: 0;
    top: 16px;
    cursor: pointer;
    z-index: 1;
  }


  .adl-containerLeft{
    margin-top: 1.25rem;
    margin-left: .125rem;
    width: 528px;
    float: left;
    /* border: .0625rem solid red; */
    padding: 14.4px 28.8px;
    border-radius: .875rem;
    box-shadow: 0 .875rem 1.125rem 0 rgb(0 0 0 / 20%), inset 0 .0313rem .0437rem 0 rgb(0 0 0 / 20%);
    display: flex;
    flex-direction: column;
    height: min-content;
    position: relative;
    background: #fff;
  }
  #adl-container{
      background: #fff;
  }
  .date{
    font-size: 20.8px;
    font-weight: bold;
    color: rgb(142,110,172);
    line-height: 2.5rem;margin-left: .75rem;
  }
  .bottom-border > td, .bottom-border > th {
    border-bottom: 1pt solid rgb(196, 200, 202);
    font-size: 12pt;
    width: 50%;
  } 
  .bottom-border{
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .bottom-border > td{
      text-align: right;
  }
  h2{
    margin: 0;
    padding: 0;
    font-size: 22.4px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 15pt;
  }
 

  .highlight {
    color: #8550FF;
    font-weight: 100;
    font-size: 2.1rem;
}
.echarttitle{
    line-height: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 16px;
}
  </style>